<template>
  <view class="receipt-info">
    <view class="left-wrap">
      <view class="consignee-info">
        <view class="consignee-info-left">
          <text class="consignee-name">{{ data.name||'' }}</text>
          <text class="consignee-phone">{{ data.phone||'' }}</text>
        </view>
        <view class="consignee-info-right">
          <uni-icons type="phone" size="20" color="#007aff" @click="call(data.phone)"></uni-icons>
        </view>
      </view>
      <view class="address-info">
        <text>{{ data.address||'' }}</text>
        <text>{{ data.addressDetail||'' }}</text>
      </view>
    </view>
    <!-- <view class="right-wrap">
      <uni-icons type="phone" size="20" color="#007aff"></uni-icons>
    </view>-->
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    call(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    }
  }
};
</script>

<style scoped lang="scss">
.receipt-info {
  .left-wrap {
  }
  .right-wrap {
  }
  .consignee-info {
    display: flex;
    justify-content: space-between;
    .consignee-name {
      font-weight: 600;
    }
    .consignee-phone {
      margin-left: 20rpx;
      font-weight: 600;
    }
  }
  .address-info {
    margin-top: 10rpx;
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;
  }
}
</style>
